<template>
  <div class="qa">
    <div class="content">
      <img class="logo" src="../../assets/cjwt.png" alt="" />
      <div style=" padding-bottom: 20px; color: #000; font-weight: bold;">

        <div class="addRed">
          用户您好：在您提问之前可以<span>优先</span>通过<span>搜索</span>栏搜索您需要提问问题的<span>关键字</span>，若您没有搜索到和您类似的问题，
          可以点击搜索框右边的<span>“+”新建提问</span>。为了更准确的解答您的问题，建议您按<span>如下格式提问</span>：<br />
          1、所使用的产品型号：例 HO3507 ST-ST-ST<br />
          2、遇到的问题类型：电机选型/接线问题/协议问题/通信问题/调试问题 等<br />
          3、描述电机的负载：空载/带载重量和惯量 等<br />
          4、描述电机的安装方式：正装/吊装/侧装  等<br />
          5、描述电机的工况：例 电机需要在20rpm的转速下，带载转90度<br />
          6、描述遇到的问题：例 带载在运动过程中有过冲，并且在90度位置有抖动<br />
          7、请您使用我司<span>上位机调试电机</span>，同时将上位机的<span>截图或视频</span>以及电机运动状态的图片和视频作为<span>附件上传</span>（若图片、视频涉及机密可以选择做为私密上传将不在公网展示）；
          由于开发环境、编译环境和个人习惯各不相同等问题，<span>请勿截图</span>除上位机之外的一段<span>源码</span>，做为提问要素，这样将无法解决您的问题。
           <br />
          由于咨询专业度高且横跨多个专业领域，我们会安排对应专业的工程师，在24小时内审核以及回复您的问题，回复后您会收到邮件或者短信的提醒，感谢您的支持。
        </div>
        
        <!-- 选择类别后，在下方输入框中输入搜索词，点击右侧搜索按钮，即可快速检索到相关信息，精准定位您关心的问题。 -->
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :key="item.id"
          v-for="item in list"
          :label="item.name"
          :name="item.id"
        ></el-tab-pane>
      </el-tabs>
      <div class="wrpas">
        <div class="search">
          <el-input
            placeholder="搜索已有提问"
            v-model="input3"
            class="input-with-select"
          >
            <div @click="search" slot="append">
              <img class="searchimg" src="../../assets/qs/2.png" alt="" />
            </div>
          </el-input>
        </div>
        <img @click="show" class="q3" src="../../assets/qs/3.png" alt="" />
      </div>
    </div>

    <!-- {{ answerList }} -->

    <div v-if="issueVoListMe && issueVoListMe.length" class="boxes">
      <div class="tit">我的提问</div>
      <lookQA
        :hasqa="true"
        :curCate="curCate"
        type="canAnswer"
        :list="issueVoListMe"
        @refreshlist="refreshlist"
      />
    </div>

    <div class="boxes">
      <lookQA
        v-if="issueVoListOther && issueVoListOther.length"
        :list="issueVoListOther"
      />
      <el-empty v-else description="暂无提问"></el-empty>

      <div v-if="total" class="page">
        <el-pagination
          @current-change="change"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 增加提问 -->
    <addQA :curCate="curCate" v-if="addqaStatus" @fnaddqa="fnaddqa" />
  </div>
</template>

<script>
import addQA from "../../components/addQA.vue";
import lookQA from "../../components/lookQA.vue";

import { addissue, getnavigationList, getissuelist } from "../../apis/index";
export default {
  name: "qa",
  components: { addQA, lookQA },
  data() {
    return {
      total: 0,
      pageSize: 10,
      pageNum: 1,
      addqaStatus: false,
      answerList: null,
      input3: "",
      activeName: "0",
      curCate: "",
      issueVoListMe: [],
      issueVoListOther: [],
      list: [
        // { name: "全系列", id: "1" },
        // { name: "中空伺服电机系列", id: "2" },
        // { name: "中空编码器系列", id: "3" },
        // { name: "关节减速电机系列", id: "4" },
        // { name: "机械臂系列", id: "5" },
        // { name: "通用调试器系列", id: "6" },
      ],
    };
  },
  computed: {},
  created() {
    this.getCateList();
  },
  methods: {
    refreshlist() {
      console.log(22211111333);
      this.pageNum = 1;
      // this.answerList=[]
      this.issueVoListMe = [];
      this.issueVoListOther = [];
      this.getissuelist();
    },
    change(e) {
      this.pageNum = e;
      this.getissuelist();
    },
    show() {
      if (localStorage.getItem("jztoken")) {
        this.addqaStatus = true;
      } else {
        this.$router.push("/login");
      }
    },
    search() {
      this.pageNum = 1;
      // this.answerList=[]
      this.issueVoListMe = [];
      this.issueVoListOther = [];
      this.getissuelist();
    },
    // 分了列表
    getCateList() {
      getnavigationList()
        .then((res) => {
          this.list = res.data.data?.map((r, index) => {
            return {
              name: r.nameType,
              id: index + 1 + "",
            };
          });
          this.list.unshift({ name: "全系列", id: "" });
          this.curCate = this.list[0]?.name;
          this.getissuelist();
        })
        .catch(() => {});
    },
    getissuelist() {
      getissuelist({
        issue: this.input3,
        nameType: this.curCate,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          // this.answerList = res.data.data;

          this.issueVoListMe = res?.data?.data?.issueVoListMe;
          this.issueVoListOther = res?.data?.data?.issueVoListOther?.rows?.map(
            (r) => {
              if (this.input3) {
                var reg = new RegExp(`(${this.input3})`, "gi");
                var replace = `<span style="background:yellow;font-weight:bold;">${this.input3}</span>`;
                return {
                  ...r,
                  issue: r.issue.replace(reg, replace),
                  slaveIssueList:r.slaveIssueList?.map(e=>{
                    return{
                      ...e,
                      issue: e.issue.replace(reg, replace),
                    }
                  })
                };
              } else {
                return {
                  ...r,
                };
              }
            }
          );

          this.total = res?.data?.data?.issueVoListOther?.total;
          console.log(this.total, 66666555);
        })
        .catch(() => {});
    },
    fnaddqa() {
      console.log("***&&&&&^^%%%%%");
      this.addqaStatus = false;
      this.pageNum = 1;
      this.answerList = [];
      this.getissuelist();
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(this.activeName);
      this.pageNum = 1;
      this.answerList = [];
      this.curCate = this.list[this.activeName]?.name;
      this.getissuelist();
    },
  },
};
</script>

<style lang="scss" scoped>
.addRed span{
  color: red;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: rgb(37, 162, 171) !important;
}
.page {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
.boxes {
  margin: 0 auto 20px;
  width: 1420px;
  background: #f1f0f0;
  border-radius: 5px;
  padding: 20px 30px 0;
  .tit {
    font-size: 17px;
    color: #2c2c2c;
    padding: 0 0 15px 0;
    font-weight: bold;
    border-bottom: 2px solid #323232;
    margin-bottom: 20px;
  }
}

ul {
  li {
    list-style-type: none;
    font-size: 14px;
    background: #ebebeb;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
    .cus {
      padding: 10px 0;
      span {
        color: #25a2ab;
        cursor: pointer;
      }
    }
    .seller {
      padding: 10px 0;
      padding-left: 40px;
    }
  }
}
::v-deep .el-tabs__nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.wrpas {
  ::v-deep .el-input-group__append,
  .el-input-group__prepend {
    padding: 0;
    background: none;
    border: none;
  }
  ::v-deep .el-input__inner {
    background: none;
    border: none;
    font-size: 16px;
  }

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 620px;
  margin: 0 auto;
  // background: #000;
  .q3 {
    width: 50px;
    margin-left: 20px;
  }
  .search {
    width: 500px;
    height: 50px;
    display: flex;
    align-items: center;
    margin: 40px auto;
    background: #ebebeb;
    border-radius: 30px;
    padding: 0 18px 0 20px;
    .searchimg {
      width: 33px;
      display: flex;
      align-content: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}

.logo {
  display: block;
  margin: 0 auto 40px;
}

.qa {
  .content {
    width: 1420px;
    margin: 0 auto 40px;
    padding-top: 80px;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    height: 0;
  }
  ::v-deep .el-tabs__active-bar {
    height: 0;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #25a2ab;
  }
  ::v-deep .el-tabs__item {
    font-weight: bold;
    color: #2c2c2c;
    font-size: 17px;
    &:hover {
      color: #25a2ab;
    }
  }
}
</style>
